import { defineComponent, ref } from 'vue'
/* hooks */
import { useDialog } from "@hooks/useDialog";
/* utils */
import { openAccurateTab } from '@src/util/platform'
import platform from '@src/util/platform.ts'
/* type */
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum'
/* scss */
import '@src/modules/intelligentQuality/style/moneyDialog.scss'

export default defineComponent({
    name: 'moneyDialog',
    props: {

    },
    setup(props, { emit, expose }) {
        const { visible, showDialog, hideDialog } = useDialog()
        /**
         * @descript 弹窗相关属性
         */
        const getModalAttrs = () => {
            return {
                props: {
                    class: "create-money-modal",
                    width: '500px',
                    title: '使用说明',
                    show: visible.value,
                    appendToBody: true
                },
                on: {
                    'update:show': (value: boolean) => {
                        visible.value = value
                        emit('updateModalValue', value)
                    }
                }
            }
        }
        
        const moneyList = ref([
            {
                price: 200,
                num: 2000,
                one: 0.1
            },
            {
                price: 1000,
                num: 12000,
                one: 0.083
            },
            {
                price: 2000,
                num: 25000,
                one: 0.08
            }
        ])

        const openHandler = () => {
            platform.openLink('https://doc.shb.ltd/shb_xoqazk/ia4qctp2ly559d1m/eka8tf9wv8x43arx/og88iofg569gtzdw.html')
        }

        /**
         * @description 清空弹窗
         */
        const clearDialog = () => {
            hideDialog()
        }

        /**
         * @description 充值
         */
        const handleConfirm = () => {
            openAccurateTab({
                type: PageRoutesTypeEnum.PageMyApplication
            })
        }

        expose({ showDialog, clearDialog })

        return {
            moneyList,
            getModalAttrs,
            clearDialog,
            handleConfirm,
            openHandler
        }
    },
    render() {
        return (
            <base-modal {...this.getModalAttrs()} onCancel={() => this.clearDialog()}>
                <div class="money-box">
                    <div class="money-box-link" onClick={() => this.openHandler()}>
                        <span class="iconfont icon-yindao"></span>
                        <span>如何快速使用智能质检机器人</span>
                    </div>
                    <div class="money-box-desc">
                    开通试用后系统默认赠送100次对比，免费测试资源用尽后开始计费，价格如下。
                    </div>
                    <div class="money-box-title">
                        充值价格表
                    </div>
                    <div class="money-box-table">
                        <el-table
                            border={true}
                            data={this.moneyList}
                            min-width={'100%'}
                            cell-style={{ borderLeft: 'none', borderRight: 'none'}}
                            row-style={{ border: '1px solid' }}
                            cellClass={'qua-table-cell'}
                            headerCellStyle={{ background: '#F5F8FA', color: '#595959' }}
                        >
                            <el-table-column
                                label={'价格（元）'}
                                prop={'price'}
                            />
                            <el-table-column
                                label={'规格（次）'}
                                prop={'num'}
                            />
                            <el-table-column
                                label={'折合单次费用'}
                                prop={'one'}
                            />
                        </el-table>
                    </div>
                </div>
                <div slot={'footer'}>
                    <el-button type={'plain-third'} onClick={() => this.clearDialog()}>关闭</el-button>
                    <el-button type={'primary'} onClick={() => this.handleConfirm()}>去充值</el-button>
                </div>
            </base-modal>
        )
    }
})